import React from "react";
import Chart from "echarts-for-react";
import PublicService from '../../../services/PublicService';
import request from '../../../utils/request';
import echarts from 'echarts';
var ColorArr = [[0.8, '#70D7FF'], [1, 'orange']]
class RightCenter extends React.Component {

    constructor(props) {
        super(props)
        this.state = {
            disList: {},
            value: 75,
        }

    }

    componentDidMount() {
        this.onsave()
    }


    componentWillReceiveProps() {


    }
    onsave = () => {
        let data = {
            date: this.props.time
        }
        request({
            url: `/zhrq-web/cockpit/common/alarmHandle`,
            method: 'GET',
         
        }).then(data => {
            // console.log(data)
            if (data.rc === 0) {
               
                // if(data.ret.rate<80) {
                //     ColorArr = [[data.ret.rate/100, '#70D7FF'], [1]]
                // } else {
                //     ColorArr = [[0.8, '#70D7FF'], [data.ret.rate/100, 'orange']]
                // }
                // this.setState({
                //     value: data.ret.rate
                // })
                if(data.ret.rate<80) {
                    ColorArr = [[75/100, '#70D7FF'], [1]]
                } else {
                    ColorArr = [[0.8, '#70D7FF'], [data.ret.rate/100, 'orange']]
                }
            }
        })
    }



    setOption = () => {
        let value = this.state.value
        return {
            //  backgroundColor:'#333333',
            tooltip: {
                formatter: "{a} <br/>{b} : {c}%"
            },
            series: [{
                name: "仪盘表",
                type: "gauge",
                splitNumber: 15,
                radius: '45%',
                startAngle: 90,
                endAngle: -269,
                clockwise: true,
                axisLine: {
                    "lineStyle": {
                        "color": [
                            ...ColorArr
                        ],

                        width: 6,
                        opacity: 1,
                    },
                    show: true,
                    length: 6
                },
                axisTick: {
                    lineStyle: {
                        // color:'rgb(51, 51, 51)',
                        color: '#0D202E',
                        width: 6,
                        opacity: 1
                    },
                    length: 6,
                    splitNumber: 1,

                },
                pointer: {           // 分隔线
                    shadowColor: '#fff', //默认透明
                    shadowBlur: 10,
                    show: false
                },
                axisLabel: {
                    // distance: 10,
                    // textStyle: {
                    //     color: "#fff"
                    // },
                    show: false,
                },
                splitLine: {
                    "show": false
                },
                // itemStyle: {
                //     normal: {
                //         color: "#494f50"
                //     }
                // },
                detail: {
                    formatter: "{value}%",
                    offsetCenter: [0, "0%"],
                    textStyle: {
                        fontSize: 20,
                        color: "#70D7FF"
                    }
                },
                title: {
                    offsetCenter: [0, "60%"]
                },
                data: [{

                    value: value
                }]
            },
            {
                name: '外圈圆',
                type: 'gauge',
                startAngle: 180,
                endAngle: -179.9,
                radius: '60%',
                splitNumber: 35,
                center: ['50%', '50%'],
                axisLabel: {
                    show: false
                },
                axisLine: {
                    lineStyle: {
                        width: 3,
                        color: [[0, '#70D7FF'], [1, '#70D7FF']]
                    }
                },
                axisTick: {
                    show: false
                },
                splitLine: {
                    show: false
                },
                pointer: {
                    show: false
                },
                detail: {
                    show: false
                },
                // data: [{value: 50, name: '00'}]
            },

            {
                name: "内圈圆",
                type: "gauge",
                radius: '30%',
                center: ['50%', '50%'],
                startAngle: 0,
                endAngle: 359.9,
                splitNumber: 20,
                hoverAnimation: true,
                axisTick: {
                    show: false
                },
                splitLine: {
                    length: 3,
                    lineStyle: {
                        width: 5,
                        color: "#114D68"
                    }
                },
                axisLabel: {
                    show: false
                },
                pointer: {
                    show: false
                },
                axisLine: {
                    lineStyle: {
                        opacity: 0
                    }
                },
                detail: {
                    show: false
                },
                data: [{
                    value: 75,
                    name: ""
                }]
            },
            {
                name: "最外圈圈圆",
                type: "gauge",
                radius: '75%',
                center: ['50%', '50%'],
                startAngle: 180,
                endAngle: -179.9,
                splitNumber: 60,
                hoverAnimation: true,
                axisTick: {
                    show: false
                },
                splitLine: {
                    length: 3,
                    lineStyle: {
                        width: 5,
                        color: "RGBA(11, 23, 31, 1)"
                    }
                },
                axisLabel: {
                    show: false
                },
                pointer: {
                    show: false
                },
                 axisLine: {
                    lineStyle: {
                        width: 3,
                        color: [[0.2, 'RGBA(214, 138, 91, 1)'], [0.5, '#114D68'],[0.7, 'RGBA(214, 138, 91, 1)'],[1, '#114D68']]
                    }
                },
                detail: {
                    show: false
                },
                data: [{
                    value: 100,
                    name: ""
                }]
            },

            ]
        };



    }

    render() {

        return (

            <Chart option={this.setOption()} notMerge lazyUpdate style={{ height: "100%", width: "50%", float: "left" }}
                echartsInstance={this.save}
            />




        );
    }

}

export default RightCenter;
